/* 
 *  全局风格样式
 * 
 * 备注：成员可以添加风格，添加后请做两件事：
 *      1.为你的风格添加注释，并取一个有语义的名称
 *      2.将新增的变量发送到群里，告知全体成员！【重要】
 */
/* 
  * ### 适配 ### =============================
  * 使用方式：
  *   原数值:16px --->  适配后:(16/@rem)
*/
/* 
  ### 颜色 ### =============================
*/
/* 
  ### 大小 ### =============================
*/
/* 
    ########### 公共版式 ###########
*/
/* 顶栏样式 */
.topStyle {
  width: 100%;
  height: 1.33333333rem;
  display: flex;
  align-items: center;
  background-color: #fff;
}
/* 通用顶栏 */
/* 
预设代码：
<div class="topPreset">
    <a href="javascript:;">
    <span class="iconfont icon-xiangzuo1"></span>
    </a>
    <h2>标题</h2>
</div>
*/
.topPreset {
  width: 100%;
  height: 1.33333333rem;
  display: flex;
  align-items: center;
  background-color: #fff;
  text-align: center;
  padding-left: 0.39653333rem;
  padding-right: 0.39653333rem;
  line-height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}
.topPreset a .iconfont {
  font-size: 0.48rem;
}
.topPreset h2 {
  width: 100%;
  text-align: center;
  font-size: 0.48rem;
}
/* 通用底栏 */
/* 
预设代码：
<div class="bottomStyle">
    < !-- 任务 -->
    <div class="tesk">
        <a id="teskBtn" href="javascript:;">
            <span class="iconfont icon-xietongrenwu"></span>
            <p>任务</p>
        </a>
    </div>
    < !-- 消息 -->
    <div class="information">
        <a id="informationBtn" href="javascript:;">
            <span class="iconfont icon-btn_mess_nor"></span>
            <p>消息</p>
        </a>
    </div>
    < !-- 我的 -->
    <div class="mine">
        <a id="mineBtn" href="javascript:;">
            <span class="iconfont icon-btn_mine_nor"></span>
            <p>我的</p>
        </a>
    </div>
</div>
*/
.bottomStyle {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.28rem;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.bottomStyle div {
  text-align: center;
}
.bottomStyle div a .iconfont {
  display: block;
  color: #818181;
  font-size: 0.48rem;
  transition: all 0.3s;
  border-radius: 50%;
  background-color: #fff;
}
.bottomStyle div a p {
  color: #818181;
  font-size: 0.26666667rem;
  transition: all 0.3s;
}
.bottomStyle div .redSel span {
  color: #ef4f3f;
  width: 0.66666667rem;
  height: 0.66666667rem;
  line-height: 0.66666667rem;
  transform: translateY(-0.26666667rem) scale(1.5);
}
.bottomStyle div .redSel p {
  color: #ef4f3f;
  font-weight: 700;
}
/* 公共版心 */
.wrapper {
  width: 9.2rem;
  border-radius: 0.26666667rem;
  margin: 0.4rem auto;
  background-color: #fff;
}
/* 全屏半透明黑色遮罩 */
/* 
预设代码：
<div class="screenMask"></div>
*/
.screenMask {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  z-index: -1;
  transition: all 0.3s;
}
.uploadFiles {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}
/* 悬浮文字提醒 */
/* 
预设代码：
<div class="floatingTips">
    <span>提示文字</span>
</div>
*/
.floatingTips {
  position: fixed;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 2.4rem;
  height: 0.8rem;
  background-color: #2a2929;
  border-radius: 0.26666667rem;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.floatingTips span {
  font-size: 0.37333333rem;
  color: #fff;
}
.floatingTips.TipsActiveClass {
  animation: floatingTipsActive 3s;
}
@keyframes floatingTipsActive {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}
/* 空内容提示 */
/* 
预设代码：
<div class="emptyContent">
    <img src="./images/不存在@2x.png" alt="" />
    <p class="emptyContentHint">空信息提示</p>
</div>
*/
.emptyContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.emptyContent img {
  width: 5.33333333rem;
  height: 3.2rem;
}
.emptyContent p {
  font-size: 0.37333333rem;
  color: #818181;
}
/* 
    ########### 快捷样式 ###########
*/
/* flex居中 给子元素居中 子元素与父元素都要设置宽度才能生效 */
.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* position子绝父相利用margin居中 */
.positionMarginCenter {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
/* position子绝父相利用transform居中 */
.positionTransformCenter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* 
    ### 小货车动画 ###
*/
.topActive {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  height: 0;
  z-index: -1;
}
.topActive img {
  transition: all 0.3s;
  transform: scale(0.4);
  height: 0;
  opacity: 0;
  animation: huoche 0.2s infinite alternate;
  z-index: -1;
}
@keyframes huoche {
  to {
    transform: translateY(3%) scale(0.4);
  }
}
/* 
    预设代码：
    < !-- 加载中动画 -->
    <div class="loading">
        <div></div>
        <p>加载中...</p>
    </div>
*/
.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.21333333rem;
  background-color: #000;
  opacity: 0.5;
  text-align: center;
  transition: all 0.3s;
}
.loading div {
  height: 1.06666667rem;
  width: 1.06666667rem;
  border: 0.08rem solid rgba(255, 255, 255, 0.5);
  border-top: 0.08rem solid #fff;
  border-right: 0.08rem solid #fff;
  border-radius: 50%;
  margin: 0.4rem auto 0.13333333rem;
  animation: loadingSpin 1.3s infinite linear;
}
.loading p {
  font-size: 0.37333333rem;
  color: #fff;
}
@keyframes loadingSpin {
  to {
    transform: rotate(360deg);
  }
}
/* 
 * 全局布局样式
 * 
 * 备注：成员可以添加全局样式，添加后请做两件事： 
 *      1.为你的样式添加注释
 *      2.将新增的样式发送到群里，告知全体成员！【重要】
 *
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  overflow-x: hidden;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, PingFangSC-Regular, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.37333333rem;
  color: #2a2929;
  background-color: #f4f4f4;
}
ins,
a {
  text-decoration: none;
  color: #2a2929;
}
ol,
ul {
  list-style: none;
}
i {
  font-style: normal;
}
input,
textarea {
  border: none;
  background-color: unset;
  outline: unset;
}
body {
  padding-top: 1.33333333rem;
  transition: all 0.3s;
}
.header {
  width: 100%;
  height: 1.33333333rem;
  background-color: #fff;
  position: fixed;
  left: 0;
  top: 0;
  padding: 0.21333333rem 0.84rem;
}
.header .text {
  display: inline-block;
  margin-right: 0.8rem;
}
.header .text a p {
  font-size: 0.37333333rem;
  font-weight: 600;
  color: #818181;
}
.header .slider {
  width: 1.12rem;
  height: 0.10666667rem;
  border-radius: 0.05333333rem;
  background-color: #E52D21;
  transition: all 0.2s;
}
.completed {
  transition: all 0.3s;
  opacity: 0;
  width: 100%;
  background-color: #fff;
  padding: 0 0.4rem 0.37333333rem;
  position: fixed;
  top: 1.33333333rem;
}
.completed .iconfont.icon-sousuo {
  position: absolute;
  top: 0.32rem;
  left: 0.58666667rem;
  font-size: 0.53333333rem;
}
.completed .taskNum {
  width: 100%;
  height: 0.8rem;
  background-color: #f4f4f4;
  font-size: 0.32rem;
  border-radius: 0.42666667rem;
  padding-left: 0.77333333rem;
}
.completed a .clear {
  position: absolute;
  top: 0.4rem;
  right: 0.74666667rem;
  display: block;
  height: 0.37333333rem;
  width: 0.37333333rem;
  border-radius: 50%;
  text-align: center;
  line-height: 0.37333333rem;
  color: #fff;
  font-size: 0.32rem;
  opacity: 0;
  transform: rotate(45deg);
  background-color: #646464;
}
.completed div {
  margin-top: 0.58666667rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.completed div a {
  display: block;
  width: 2.82666667rem;
  height: 0.8rem;
  background-color: #f4f4f4;
  border-radius: 0.42666667rem;
  text-align: center;
  font-size: 0.37333333rem;
  line-height: 0.8rem;
  color: #818181;
}
.completed div p {
  font-size: 0.37333333rem;
}
.completed div .btn {
  width: 1.6rem;
  background-color: #ef4f3f;
  color: #fff;
}
.text.selected a p {
  color: #2a2929;
}
.emptyContent {
  opacity: 0;
}
.toPickedUp {
  margin-bottom: 1.86666667rem;
}
.toPickedUp .list {
  padding: 0.4rem 0.45333333rem 0.50666667rem 0.53333333rem;
}
.toPickedUp .list .titleNum {
  margin-bottom: 0.58666667rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.toPickedUp .list .titleNum h3 {
  font-weight: 600;
  font-size: 0.42666667rem;
}
.toPickedUp .list .titleNum .btn {
  opacity: 0;
  width: 1.38666667rem;
  height: 0.58666667rem;
  font-size: 0.32rem;
  color: #ef4f3f;
  border-radius: 0.58666667rem;
  text-align: center;
  line-height: 0.58666667rem;
  border: 0.02666667rem solid #ef4f3f;
}
.toPickedUp .list .middleAddress {
  border-bottom: 0.02666667rem solid #eee;
  display: flex;
  align-items: center;
  justify-content: left;
  padding-bottom: 0.57333333rem;
}
.toPickedUp .list .middleAddress .leftImg {
  margin-right: 0.42666667rem;
}
.toPickedUp .list .middleAddress .leftImg .startImg {
  background-color: #000;
}
.toPickedUp .list .middleAddress .leftImg .endImg {
  background-color: #ef4f3f;
}
.toPickedUp .list .middleAddress .leftImg p {
  text-align: center;
  font-size: 0.32rem;
  color: #fff;
  width: 0.58666667rem;
  height: 0.58666667rem;
  line-height: 0.58666667rem;
  border-radius: 50%;
}
.toPickedUp .list .middleAddress .leftImg .line {
  border-radius: 0;
  height: 0.8rem;
  line-height: 0.8rem;
  color: #818181;
  transform: rotate(90deg);
}
.toPickedUp .list .middleAddress .rightText p {
  font-size: 0.37333333rem;
  color: #818181;
}
.toPickedUp .list .middleAddress .rightText .start {
  margin-bottom: 0.38666667rem;
}
.toPickedUp .list .footerDate {
  display: flex;
  justify-content: space-between;
  padding-top: 0.38666667rem;
}
.toPickedUp .list .footerDate .time {
  font-size: 0.37333333rem;
}
.toPickedUp .list .footerDate .time p {
  color: #818181;
}
.toPickedUp .list .footerDate .btn {
  width: 2.13333333rem;
  height: 0.8rem;
  border-radius: 0.8rem;
  background-color: #ef4f3f;
  font-size: 0.37333333rem;
  color: #fff;
  text-align: center;
  line-height: 0.8rem;
}
.loading {
  opacity: 0;
}
